<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>环境要素</title>
    <link rel="stylesheet" href="http://localhost:8080/libs/Cesium/1.40/Build/Cesium/Widgets/widgets.css">
    <script type="text/javascript" src="http://localhost:8080/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://localhost:8080/libs/Cesium/1.40/Build/Cesium/Cesium.js"></script>
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #btnDiv {
            position: absolute;
            left: 10px;
            top: 10px;
            color: white;
            background: rgba(42, 42, 42, 0.8);
            padding: 4px;
            margin: 5px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="btnDiv">
    <table>
        <tbody>
        <tr>
            <td>色调</td>
            <td>
                -1 <input id="hueShift" type="range" min="-1" max="1" step="0.01"> 1
            </td>
        </tr>
        <tr>
            <td>饱和度</td>
            <td>
                -1 <input id="saturationShift" type="range" min="-1" max="1" step="0.01"> 1
            </td>
        </tr>
        <tr>
            <td>亮度</td>
            <td>
                -1 <input id="brightnessShift" type="range" min="-1" max="1" step="0.01"> 1
            </td>
        </tr>
        </tbody>
    </table>
    <input id="lighting" type="checkbox" class="cesium-button">阳光
    <input id="fog" type="checkbox" class="cesium-button">雾
</div>
<script>
    var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false,//是否显示图层选择器,右上角按钮
        fullscreenButton: false,//是否显示全屏按钮,右下角按钮
        geocoder: false,//是否显示geocoder小器件，右上角查询按钮
        homeButton: false,//是否显示Home按钮,右上角按钮
        infoBox: true,//是否显示信息框
        sceneModePicker: false,//是否显示3D/2D选择器 ,右上角按钮
        selectionIndicator: false,//是否显示选取指示器组件，绿色选中框
        timeline: false,//是否显示时间轴，底部
        navigationHelpButton: false//是否显示帮助按钮，右上角按钮
    });

    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
        orientation: {
            heading : 0,
            pitch : 0,
            roll : 0
        }
    });

    // 模拟大气的一些情况

    $("#hueShift").on('input propertychange',function(){
        viewer.scene.skyAtmosphere.hueShift = $(this).val(); // Default Value:  0.0
    });
    $("#saturationShift").on('input propertychange',function(){
        viewer.scene.skyAtmosphere.saturationShift = $(this).val(); //Default Value:  0.0
    });
    $("#brightnessShift").on('input propertychange',function(){
        viewer.scene.skyAtmosphere.brightnessShift = $(this).val(); //Default Value:  0.0
    });
    $("#lighting").on("change", function () {
        viewer.scene.globe.enableLighting = $(this).prop("checked"); //Default Value:  false
    });
    $("#fog").on("change", function () {
       viewer.scene.fog.enabled = $(this).prop("checked"); //Default Value:  true
    });
</script>
</body>
</html>